<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                template="./MasterPageHome.xhtml"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="Title">
        <title>Register</title>
    </ui:define>
    <ui:define name="content">
        <h:form>
            <table width="100%" cellspacing="10" border="0">
                <tr>
                    <td align="right" width="190px">
                        Username:
                    </td>
                    <td align="left" width="250px">
                        <p:inputText 
                            style="width: 200px"
                            value="#{registerMB.account}"
                            id="txtaccount"
                            validator="#{registerMB.validateUserName}"
                            required="true"
                            requiredMessage="Username is required"
                            validatorMessage="Password must have at least 6 characters">
                            <p:ajax update="messageforAccount" event="keyup"/>
                            <p:ajax update="messageforAccount" event="blur"/>
                            <f:validateLength minimum="6" />
                        </p:inputText>
                    </td>
                    <td>
                        <p:message id="messageforAccount" for="txtaccount"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Password:
                    </td>
                    <td>
                        <p:password 
                            required="true"
                            style="width: 200px"
                            id="txtpassword"
                            binding="#{passwordComponent}"
                            value="#{registerMB.password}"
                            requiredMessage="Password id required"
                            validatorMessage="Password must have at least 6 characters">
                            <p:ajax update="messageforPassword" event="keyup"/>
                            <p:ajax update="messageforPassword" event="blur"/>
                            <f:validateLength minimum="6" />
                        </p:password>
                    </td>
                    <td>
                        <p:message id="messageforPassword" for="txtpassword"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Confirm Password:
                    </td>
                    <td>
                        <p:password 
                            id="txtconfirmpassword"
                            style="width: 200px"
                            value="#{registerMB.conirmpassword}"
                            required="true"
                            validator="#{registerMB.validateConfirmPassword}"
                            requiredMessage="Confirm Password is required">                             
                            <p:ajax update="messageforConfirm" process="txtpassword, txtconfirmpassword" event="keyup"/>
                            <p:ajax update="messageforConfirm" process="txtpassword, txtconfirmpassword" event="blur"/>
                            <f:attribute name="passwordComponent" value="#{passwordComponent}"/>
                        </p:password>
                    </td>
                    <td>
                        <p:message id="messageforConfirm" for="txtconfirmpassword"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Email:
                    </td>
                    <td>
                        <p:inputText 
                            id="txtemail"
                            required="true" 
                            style="width: 200px"
                            value="#{registerMB.email}"
                            validator="#{registerMB.validateEmail}"
                            requiredMessage="Email is required">
                            <p:ajax update="MesageforEmail" event="keyup"/>
                            <p:ajax update="MesageforEmail" event="blur"/>
                        </p:inputText>
                    </td>
                    <td>
                        <p:message id="MesageforEmail" for="txtemail"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Representative:
                    </td>
                    <td>
                        <h:selectOneRadio
                            id="rdRepresentative"
                            required="true"
                            requiredMessage="Choose Your Representative" 
                            value="#{registerMB.type}">
                            <f:selectItem itemLabel="Person" itemValue="true"/>
                            <f:selectItem itemLabel="Company" itemValue="false"/>
                        </h:selectOneRadio>
                    </td>
                    <td>
                        <p:message id="MessageForRepresentative" for="rdRepresentative"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        FullName:
                    </td>
                    <td>
                        <p:inputText 
                            id="txtfullname"
                            value="#{registerMB.fullname}" 
                            style="width: 200px"
                            required="true"
                            requiredMessage="Password is required">
                            <p:ajax update="Messageforfullname" event="keyup"/>
                            <p:ajax update="Messageforfullname" event="blur"/>
                        </p:inputText>
                    </td>
                    <td>
                        <p:message id="Messageforfullname" for="txtfullname"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Gender:
                    </td>
                    <td>
                        <h:selectOneRadio
                            id="rdgenfer"
                            required="true"
                            requiredMessage="Choose Your Gender" 
                            value="#{registerMB.sex}">
                            <f:selectItem itemLabel="Male" itemValue="true"/>
                            <f:selectItem itemLabel="Female" itemValue="false"/>
                        </h:selectOneRadio>   

                    </td>
                    <td>
                        <p:message id="MessageforGender" for="rdgenfer"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Birthday:
                    </td>
                    <td>              
                        <p:calendar
                            id="txtcalendar"
                            value="#{registerMB.birthday}"
                            required="true"
                            requiredMessage="Choose Your Birthday"
                            pattern="MM/dd/yyyy"
                            yearRange="c-50:c+50"
                            navigator="true"
                            size="22"
                            />
                    </td>
                    <td>    
                        <p:message id="MessageForCalendar" for="txtcalendar"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        City
                    </td>
                    <td>
                        <h:selectOneMenu value="#{registerMB.city}">
                            <f:selectItem itemLabel="Ha Noi" itemValue="Ha Noi"/>
                            <f:selectItem itemLabel="Hai Phong" itemValue="Hai Phong"/>
                            <f:selectItem itemLabel="TP HCM" itemValue="TP HCM"/>
                            <f:selectItem itemLabel="Da Nang" itemValue="Da Nang"/>
                            <f:selectItem itemLabel="Vinh" itemValue="Vinh"/>
                            <f:selectItem itemLabel="Thanh Hoa" itemValue="Thanh Hoa"/>
                            <f:selectItem itemLabel="Nghe An" itemValue="Nghe An"/>
                            <f:selectItem itemLabel="Tra Vinh" itemValue="Tra Vinh"/>
                            <f:selectItem itemLabel="Dak Lak" itemValue="Dak Lak"/>
                            <f:selectItem itemLabel="Hue" itemValue="Hue"/>
                            <f:selectItem itemLabel="Quang Ninh" itemValue="Quang Ninh"/>
                        </h:selectOneMenu>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Address
                    </td>
                    <td align="left">
                        <p:inputTextarea 
                            id="txtaddress"
                            style="width: 220px"
                            required="true" 
                            value="#{registerMB.address}"
                            requiredMessage="*">
                            <p:ajax update="MessageForAddress" event="keyup"/>
                            <p:ajax update="MessageForAddress" event="blur"/>
                        </p:inputTextarea>
                    </td>
                    <td>
                        <p:message id="MessageForAddress" for="txtaddress"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                    </td>
                    <td align="left">
                        <p:commandButton ajax="false"  action="#{registerMB.register}" value="Register" />
                    </td>
                    <td></td>
                </tr>
            </table>
        </h:form>    
    </ui:define>

</ui:composition>
